import React, { Component } from 'react'

// import {cloneDeep} from 'lodash'
import {Map, List, fromJS} from 'immutable'

import CounterBtn from './immutable-redux/CounterBtn'
import Counter from './immutable-redux/Counter'

import {connect} from 'react-redux'

import {increment, decrement} from './immutable-redux/actions/counter'

@connect(null, {increment, decrement})
class ImmutableApp extends Component {
  render() {
    return (
      <div>
        <CounterBtn onClick={this.props.decrement}>-</CounterBtn>
        <Counter />
        <CounterBtn onClick={this.props.increment}>+</CounterBtn>
      </div>
    )
  }
}

export default ImmutableApp




// const state = {
//     name: 'lili',
//     courses: ['阅读', '写作']
// }
const state = {
    name: 'lili',
    obj: {
        x: {
            y: 'abc'
        }
    },
    courses: ['阅读', '写作']
}
// const newState = state
// console.log(newState === state);  // true

// 浅拷贝
// const newState = Object.assign({}, state)
// console.log(newState === state);  // false
// newState.courses.push('敲代码')
// console.log(newState, state);     // state里面的数组也同样变化了
// console.log(newState.courses === state.courses);     // true

// const newState = JSON.parse(JSON.stringify(state))     // 这样可以进行深拷贝，但是不能拷贝function
// console.log(newState === state);  // false
// newState.courses.push('敲代码')
// console.log(newState, state);     // 不一样了


// 调用 lodash 里的深拷贝方法
// const newState = cloneDeep(state)    // 使用递归，消耗性能
// console.log(newState === state);  // false
// newState.courses.push('敲代码')
// console.log(newState, state);     // 不一样


// immutable         安装 npm i immutable -S
/*
    immutable，译为"不可改变的"，是一种持久化数据。它有一旦被创建就不会被修改的特性。
    当你修改 immutable 对象的时候返回新的 immutable。但是原数据不会改变。
    使用了hash算法代替递归
    两种常用的 immutable 数据结构： Map 和 List
*/
//使用  Map用来做对象拷贝
const imState = Map({
    name: 'lili',
    courses: ['阅读', '写作']
})
console.log(state.name, imState.get('name'));   // 获取参数
const newImState = imState.set('name', 'zhangsan');   // 修改参数,每次返回新的拷贝, 所以要定义新的变量接收
console.log(imState.get('name'), newImState.get('name'));   // 都可以打印出来，说明可以取修改之前的值
// const newImStateIn = imState.setIn(['name'], 'wangwu');   // setIn方法
// const newImStateUp = imState.update('name', v => v = 'zhaoliu');
// const newImStateUp = imState.updateIn(['name'], v => v = 'zhaoliu');

// List 用来做数组的
const list1 = List([1,2])
const list2 = list1.push(3,4,5)
console.log(list1.get(4), list2.get(4));   // undefined 4


// const state_copy = Map({
//     name: 'lili',
//     courses: List(['阅读', '写作'])   // 繁琐
// })

// fromJs 多层改变,复杂结构
const imStateCopy = fromJS(state)
console.log(imStateCopy.get('courses').get(0));   // 阅读
console.log(imStateCopy.getIn(['courses', 0]));   // 阅读    getIn方式，直接多层取
console.log(imStateCopy.getIn(['obj', 'x', 'y']));   // abc


// toJs 转换成原生js
// console.log(imStateCopy.toJS().obj.x.y);

// 在react中可以使用 redux-immutable 代替 redux